export default function useWatermarkBg(props) {
  const devicePixelRatio = window.devicePixelRatio || 1
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')

  const font = props.fontSize + 'px PingFangSc-Regular'
  ctx.font = font
  const { width } = ctx.measureText(props.text)
  const canvasSize = Math.max(100, width) + props.gap * devicePixelRatio
  canvas.width = canvasSize
  canvas.height = canvasSize

  ctx.translate(canvas.width / 2, canvas.height / 2)
  ctx.rotate((Math.PI / 180) * -45)
  ctx.font = font
  ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(props.text, 0, 0)

  return { size: canvasSize / devicePixelRatio, base64: canvas.toDataURL() }
}
